import React, { useEffect, useRef, useState } from "react";
import { Avatar, Button } from "antd-mobile";
import dayjs from "dayjs";
import { isValidArr } from "@/utils";
import { StageItemComp } from "@/components/pages/rank";

const pageName = "rank.stage";
const klassName = pageName.replace(/\./g, '-');


export default function Comp({data = [], self}) {

  let _data =  [...data].sort((a, b) => a.rank - b.rank).slice(0, 3);

  return (
    <div className={`cp-${klassName}`}>
      <div className="inner">
        {
          isValidArr(_data) &&
          _data.map((item, index) => {
            return (
              <StageItemComp rank={item?.rank} item={item} key={index} />
            )
          })
        }
      </div>
    </div>
  )
}

